<template>
  <ul class="timeline">
      <li style="font-size: 24px;color: #fff;margin-bottom: 20px;">共{{timelineData.length}}条报警信息</li>
      <li class="timeline-item" v-for="(item,index) in timelineData" :key="index">
          <div class="timeline-item__tail"></div>
          <div class="timeline-item__node">
              <img class="timeline-item__icon" src="https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231020/0829a0f13ab1695d9862a53147ac2b6f.svg"/>
          </div>
          <div class="timeline-item__wrapper">
              <div class="timeline-item__timestamp">{{ item.预警日期 }}</div>
              <div class="timeline-item__content">{{ item.预警内容 }}</div>
          </div>
      </li>
  </ul>
</template>
<script>
export default {
  data() {
      return {
          timelineData: [
             
          ],
      };
  },
  watch: {
  dataChart: {
    handler(val) {
       this.timelineData=[]
          val.map((item)=>{
              this.timelineData.push({
                  预警日期:item.getTime,
                  预警内容:item.alarmContent
              })
          })
    },
    deep: true,
    immediate: true,
  },
},
  mounted(){
      
  },
  
};
</script>

<style scoped>
.timeline {
  margin: 0;
  font-size: 14px;
  list-style: none;
  padding:20px;
  height:100px;
overflow:auto;

}

.timeline .timeline-item:last-child .timeline-item__tail {
  display: none;
}
.timeline-item {
  position: relative;
  padding-bottom: 20px;
}

.timeline-item__wrapper {
  position: relative;
  padding-left: 45px;
  top: -3px;
}

.timeline-item__tail {
  position: absolute;
  left: 4px;
  height: 100%;
  border-left: 2px solid #878CFF80;
;
}

.timeline-item__icon {
  color: #fff;
  font-size: 13px;
}

.timeline-item__node {
  position: absolute;
  background-color: #e4e7ed;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  left: -12px;
  width:34px;
  height: 34px;
  top:-5px;
}

.timeline-item__content {
  color: #fff;
  padding:5px 10px;
  
}
.timeline-item__timestamp {
background: linear-gradient(117.29deg, rgba(223, 91, 244, 0.45) 13.82%, rgba(3, 91, 255, 0.45) 82.98%);
/* display: inline-block; */
padding:5px 10px;
margin-bottom:5px;
color: #fff;

}

</style>
